<template>
  <div id='navibar'>
    <el-row>
      <el-col :span="4">
        <div id="logo"
             @click="retHome">
          <img :src="logo"
               fit="fill" />
        </div>
      </el-col>
      <el-col :span="4"
              :offset="16">
        <el-popover placement="top-start"
                    width="150px"
                    trigger="hover">
          <div slot="reference"
               class="profile">
            <div class="name">
              <span class="el-dropdown-link">
                你好，{{this.$store.state.user}}&emsp;
              </span>
            </div>
            <el-avatar class="avatar"
                       :size="40"
                       :src="me">
            </el-avatar>
          </div>
          <div>
            <el-button class="btn"
                       type="text"
                       @click="pswDialogVisible = true">修改密码</el-button>
            <div>
              <el-button id="quit"
                         class="btn"
                         type="text"
                         @click="toPage('/login')">退出登录</el-button>
            </div>
          </div>
        </el-popover>
      </el-col>
    </el-row>
    <el-dialog title="修改密码"
               center
               :visible.sync="pswDialogVisible">
      <el-form ref="modifyPsw"
               :model="pswForm"
               :rules="pswRules">
        <el-form-item label="原密码："
                      prop="password"
                      :label-width="formLabelWidth">
          <el-input v-model="pswForm.password"
                    placeholder="请输入您的原密码"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码："
                      prop="newpassword"
                      :label-width="formLabelWidth">
          <el-input type="password"
                    placeholder="请设置您的新密码"
                    v-model="pswForm.newpassword" />
        </el-form-item>
        <el-form-item label="确认密码："
                      prop="confirmpassword"
                      :label-width="formLabelWidth">
          <el-input type="password"
                    placeholder="请再次设置您的新密码"
                    v-model="pswForm.confirmpassword" />

        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="pswDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="onModifyPsw('modifyPsw')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logo: require("../assets/yanfengLogo.png"),
      me: require("../assets/user.png"),
      pswForm: {
        password: "",
        newpassword: "",
        confirmpassword: ""
      },
      pswRules: {
        password: [
          { required: true, message: "原密码不可为空", trigger: "blur" }
        ],
        newpassword: [
          { required: true, message: "新密码不可为空", trigger: "blur" }
        ],
        confirmpassword: [
          { required: true, message: "确认密码不可为空", trigger: "blur" }
        ]
      },
      formLabelWidth: "120px",
      // 对话框显示和隐藏
      pswDialogVisible: false
    };
  },
  methods: {
    retHome() {
      this.$router.replace("/home");
    },
    toPage(name) {
      console.log("to Profile page");
      if (name == "/login") {
        this.$store.dispatch("logout");
      }
      this.$router.replace(name);
    },
    onModifyPsw(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.pswForm.newpassword == this.pswForm.confirmpassword) {
            console.log("password equls");
            this.$api.userInfo
              .modifyPsw({
                id: this.$store.state.id,
                old: this.pswForm.password,
                password: this.pswForm.newpassword
              })
              .then(response => {
                if (response.data) {
                  this.$message({
                    message: "密码修改成功,请重新登录",
                    type: "success"
                  });
                  this.pswDialogVisible = false;
                  this.$router.replace("/login");
                } else {
                  this.$message.error("原密码有误");
                }
              })
              .catch(function(error) {
                this.$message.error("密码修改失败");
                this.pswDialogVisible = false;
              });
          } else {
            this.$message.error("两次密码不一样");
          }
        }
      });
    }
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
@height: 60px;
@logo-height: 40px;
@img-height: 40px;
@text-height: 20px;
.name {
  height: @text-height;
  margin-top: (@height - @text-height) / 2;
  float: left;
  color: black;
}
.avatar {
  background: #ffffff00;
  margin-top: (@height - @img-height) / 2;
}
#logo {
  background: #ffffff00;
  margin-top: (@height - @logo-height) / 2;
  cursor: pointer;
}
img {
  height: @logo-height;
}
.profile {
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.btn {
  width: 100%;
}
#quit {
  color: #ff0000;
}
</style>
